<ng-container *ngFor="let item of items">
    <div
        class="link-item-wrapper"
        *ngIf="showItem(item)"
    >
        <div
            #linkItem
            [ngClass]="{
            'link-item': true, 
            'active': isActive(item),
            'disable': item.disable && item.disable()
            }"
            (click)="onClickItem($event, item)">
            <div *ngIf="item.childItems" class="link-item-button-wrapper">
                <i *ngIf="!minimize" class="fa fa-angle-right"></i>
            </div>
            <a *ngIf="item.path && !item.onClick" routerLink="{{item.path}}">
                <i class="{{item.iconClass}}"></i>
                <span [hidden]="minimize">{{item.title}}</span>
            </a>
            <span *ngIf="item.onClick || item.childItems">
                <i class="{{item.iconClass}}"></i>
                <span [hidden]="minimize">{{item.title}}</span>
            </span>
        </div>
        <div 
            #childLinkWrapper
            *ngIf="minimize || item.childItems"
            class="child-link-wrapper">
            <div
                [hidden]="!minimize"
                class="child-link-title"

            >
                <a *ngIf="item.path" (click)="onClickItem($event, item)" style="cursor: pointer;">
                    {{item.title}}
                </a>
                <span *ngIf="!item.path">{{item.title}}</span>
            </div>
            <ng-container *ngFor="let childItem of item.childItems">
                <div 
                    *ngIf="showItem(childItem)"
                    [ngClass]="{
                    'link-item': true, 
                    'divider': childItem.id === 'divider',
                    'theme': childItem.id === 'theme'
                    }">
                    <a
                        *ngIf="childItem.id !== 'theme'" 
                        routerLink="{{childItem.path}}"
                        (click)="onClickItem($event, childItem)">
                        <i class="{{childItem.iconClass}}"></i>
                        <span
                            [innerHTML]="childItem.title"
                        ></span>
                    </a>
                    <pp-theme-widget *ngIf="childItem.id === 'theme'"></pp-theme-widget>
                </div>
            </ng-container>
        </div>
    </div>
</ng-container>
